<template>
  <div class="login-container" :class="{ dark: isDark }">
    <!-- 主题切换按钮 -->
    <div class="theme-switch">
      <el-button class="theme-button" circle @click="toggleTheme">
        <el-icon><component :is="isDark ? 'Sunny' : 'Moon'" /></el-icon>
      </el-button>
    </div>
    
    <!-- 动态背景 -->
    <div class="animated-shapes">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
    </div>

    <!-- 中央登录表单区域 -->
    <div class="login-card">
      <!-- Logo和标题区域 -->
      <div class="brand-content">
        <!-- <div class="logo-wrapper">
          <Logo :size="70" class="logo-animation" :color="logoColor" />
        </div> -->
        <h1 class="brand-title">{{ settings.title }}</h1>
      </div>

      <h2 class="welcome-text">欢迎回来</h2>
      <p class="login-tip">请使用您的账号密码登录系统</p>

      <!-- 登录方式切换 -->
      <div class="login-tabs">
        <div
          class="tab-item"
          :class="{ active: loginType === 'account' }"
          @click="loginType = 'account'"
        >
          <el-icon><User /></el-icon>
          账号登录
        </div>
        <div
          class="tab-item"
          :class="{ active: loginType === 'qrcode' }"
          @click="loginType = 'qrcode'"
        >
          <el-icon><component :is="QrCode" /></el-icon>
          扫码登录
        </div>
      </div>

      <!-- 登录表单内容 -->
      <transition name="fade-transform" mode="out-in">
        <el-form
          v-if="loginType === 'account'"
          ref="loginFormRef"
          :model="loginForm"
          :rules="rules"
          @keyup.enter="handleLogin"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              prefix-icon="User"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>

          <div class="login-options">
            <el-checkbox v-model="rememberMe">记住我</el-checkbox>
            <a href="#" class="forget-password">忘记密码？</a>
          </div>

          <el-button
            :loading="loading"
            type="primary"
            class="login-button"
            @click="handleLogin"
          >
            {{ loading ? "登录中..." : "登录" }}
          </el-button>
        </el-form>

        <div v-else class="qrcode-box">
          <div class="qrcode-wrapper">
            <div class="qrcode-scanner"></div>
            <img :src="qrCodeUrl" alt="二维码" class="qrcode-img" />
            <transition name="fade">
              <div class="qrcode-mask" v-if="qrCodeExpired">
                <el-icon class="expired-icon"><Warning /></el-icon>
                <p>二维码已过期</p>
                <el-button type="primary" @click="refreshQrCode" round>
                  <el-icon><RefreshRight /></el-icon>
                  刷新二维码
                </el-button>
              </div>
            </transition>
          </div>
          <p class="qrcode-tip">
            <el-icon><Iphone /></el-icon>
            请使用手机扫码登录
          </p>
        </div>
      </transition>

      <!-- 社交登录 -->
      <div class="social-login">
        <div class="divider">其他登录方式</div>
        <div class="social-icons">
          <div class="social-icon" @click="handleSocialLogin('wechat')">
            <svg-icon name="wechat" />
          </div>
          <div class="social-icon" @click="handleSocialLogin('qq')">
            <svg-icon name="qq" />
          </div>
          <div class="social-icon" @click="handleSocialLogin('gitee')">
            <svg-icon name="gitee" />
          </div>
        </div>
      </div>

      <!-- 页脚版权信息 -->
      <footer class="footer">
        <p>Copyright © 2025 Neat-Admin</p>
        <a href="https://beian.miit.gov.cn/" target="_blank"
          >赣ICP备2025064710号</a
        >
      </footer>
    </div>

    <!-- 滑块验证 -->
    <el-dialog
      title="请拖动滑块完成拼图"
      width="360px"
      v-model="showSliderVerify"
      :close-on-click-modal="false"
      @closed="refresh"
      append-to-body
    >
      <slider-verify
        ref="sliderVerifyRef"
        @success="onSuccess"
        @fail="onFail"
        @again="onAgain"
      />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/store/modules/user";
import { useSettingsStore } from "@/store/modules/settings";
import Logo from "@/layouts/components/Sidebar/Logo.vue";
import settings from "@/config/settings";
import SliderVerify from "./components/SliderVerify.vue";
import { getCaptchaSwitchApi } from "@/api/system/auth";

const QrCode = markRaw({
  name: "QrCode",
  render() {
    return h(
      "svg",
      {
        viewBox: "0 0 1024 1024",
        width: "1em",
        height: "1em",
        fill: "currentColor",
      },
      [
        h("path", {
          d: "M468 128H160c-17.7 0-32 14.3-32 32v308c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V136c0-4.4-3.6-8-8-8zm-56 284H192V192h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm444-140H556c-4.4 0-8 3.6-8 8v332c0 4.4 3.6 8 8 8h276c4.4 0 8-3.6 8-8V160c0-17.7-14.3-32-32-32zm-56 284H556V192h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM192 556v308c0 17.7 14.3 32 32 32h308c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8H160c-4.4 0-8 3.6-8 8zm56 284V556h220v284H192zm-64-220h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm500 220c0 4.4 3.6 8 8 8h108v108c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8H556c-4.4 0-8 3.6-8 8v332zm64-216h108v108H748V624z",
        }),
      ]
    );
  },
});
const userStore = useUserStore();
const settingsStore = useSettingsStore();
const loginFormRef = ref<FormInstance>();
const loading = ref(false);
const rememberMe = ref(false);
const loginType = ref("account");
const qrCodeUrl = ref("https://logo.png");
const qrCodeExpired = ref(false);

const showSliderVerify = ref(false);
const sliderVerifyRef = ref();

const loginForm = reactive({
  username: "test",
  password: "123456",
  rememberMe: false,
  source: "ADMIN",
  nonceStr: "",
  value: "",
});

const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
  ],
};

const isDark = computed(() => settingsStore.theme === "dark");

const refresh = () => {
  sliderVerifyRef.value?.refresh();
};

const onSuccess = (captcha: any) => {
  loginForm.nonceStr = captcha.nonceStr;
  loginForm.value = captcha.value;

  login();
};

const login = () => {
  loading.value = true;
  userStore
    .login(loginForm)
    .then(() => {
      sliderVerifyRef?.value?.verifySuccessEvent();
      router.push("/");
      ElMessage.success("登录成功");
    })
    .catch(() => {
      refresh();
    })
    .finally(() => {
      loading.value = false;
    });
};


/* 滑动验证失败*/
const onFail = (msg: string) => {
  refresh();
};
/* 滑动验证异常*/
const onAgain = () => {
  ElMessage.error("滑动操作异常，请重试");
};

const toggleTheme = () => {
  const newTheme = isDark.value ? "light" : "dark";
  settingsStore.saveSettings({ theme: newTheme });
};

const handleLogin = async () => {
  loginFormRef.value?.validate((flag) => {
    getCaptchaSwitchApi().then((res) => {
      if (!res.data || res.data.configValue === "Y") {
        showSliderVerify.value = true;
      } else {
        login();
      }
    });
  });
};

const handleSocialLogin = (type: string) => {
  ElMessage.success(type + "登录测试");
};

const refreshQrCode = async () => {
  qrCodeExpired.value = false;
  // TODO: 调用后端接口获取新的二维码
};

let qrCodeTimer: number;
watch(loginType, (newVal) => {
  if (newVal === "qrcode") {
    refreshQrCode();
    qrCodeTimer = window.setInterval(() => {
      // TODO: 检查二维码状态
    }, 3000);
  } else {
    clearInterval(qrCodeTimer);
  }
});

onUnmounted(() => {
  clearInterval(qrCodeTimer);
});

// 添加 logo 颜色计算
const logoColor = computed(() => {
  return isDark.value ? "#4ecdc4" : "#ff6b6b";
});
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  width: 100%;
  background: var(--el-bg-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  

}

/* 动态形状 */
.animated-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;

  .shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(40px);
    animation: float 15s infinite ease-in-out;
  }

  .shape-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(45deg, #3b82f6, #14b8a6);
    top: 10%;
    left: 15%;
    animation-delay: 0s;
  }

  .shape-2 {
    width: 250px;
    height: 250px;
    background: linear-gradient(45deg, #0ea5e9, #06b6d4);
    bottom: 10%;
    right: 15%;
    animation-delay: -3s;
  }

  .shape-3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #0891b2, #0284c7);
    top: 50%;
    left: 5%;
    animation-delay: -6s;
  }

  .shape-4 {
    width: 180px;
    height: 180px;
    background: linear-gradient(45deg, #0ea5e9, #2dd4bf);
    top: 30%;
    right: 10%;
    animation-delay: -9s;
  }
}

/* 中央登录卡片 */
.login-card {
  width: 100%;
  max-width: 380px;
  padding: 35px 25px;
  background: var(--el-bg-color);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* 品牌内容样式优化 */
  .brand-content {
    text-align: center;
    margin-bottom: 25px;
    width: 100%;

    .logo-wrapper {
      margin-bottom: 14px;
      display: flex;
      justify-content: center;
    }

    .logo-animation {
      animation: pulse 3s infinite ease-in-out;
    }

    .brand-title {
      font-size: 26px;
      font-weight: 800;
      background: linear-gradient(45deg, #0ea5e9, #14b8a6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: -1px;
    }
  }

  .welcome-text {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    background: linear-gradient(45deg, #0ea5e9, #14b8a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    align-self: flex-start;
  }

  .login-tip {
    color: #64748b;
    margin-bottom: 20px;
    font-size: 14px;
    align-self: flex-start;
  }

  /* 登录方式切换 */
  .login-tabs {
    display: flex;
    margin-bottom: 25px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    position: relative;
    width: 100%;

    .tab-item {
      flex: 1;
      padding: 10px;
      text-align: center;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #64748b;
      font-weight: 500;

      &.active {
        background: white;
        color: #0ea5e9;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        transform: translateY(-1px);
      }

      &:hover:not(.active) {
        background: rgba(255, 255, 255, 0.5);
      }

      .el-icon {
        font-size: 16px;
      }
    }
  }

  /* 表单项样式 */
  :deep(.el-form) {
    width: 100%;
  }

  :deep(.el-form-item) {
    margin-bottom: 20px;

    .el-input__wrapper {
      padding: 0 15px;
      height: 46px;
      border-radius: 10px;
      background: #f1f5f9;
      border: 2px solid transparent;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: none !important;

      &:hover {
        background: #f8fafc;
      }

      &.is-focus {
        border-color: #0ea5e9;
        background: white;
      }

      .el-input__inner {
        font-size: 14px;
      }
    }
  }

  /* 登录按钮 */
  .login-button {
    width: 100%;
    height: 46px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    margin-top: 10px;
    background: linear-gradient(45deg, #0ea5e9, #14b8a6);
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
    }

    &:active {
      transform: translateY(0);
    }
  }

  /* 二维码登录样式 */
  .qrcode-box {
    text-align: center;
    padding: 15px 0;
    width: 100%;

    .qrcode-wrapper {
      width: 180px;
      height: 180px;
      margin: 0 auto;
      padding: 15px;
      background: white;
      border-radius: 14px;
      position: relative;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
      }

      .qrcode-scanner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: #0ea5e9;
        animation: scan 2s linear infinite;
        box-shadow: 0 0 8px rgba(14, 165, 233, 0.6);
      }

      .qrcode-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 8px;
      }

      .qrcode-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.95);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        border-radius: 14px;
      }
    }

    .qrcode-tip {
      margin-top: 16px;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
    }
  }

  /* 社交登录样式 */
  .social-login {
    margin-top: 25px;
    width: 100%;

    .divider {
      display: flex;
      align-items: center;
      color: #94a3b8;
      font-size: 13px;
      margin-bottom: 20px;

      &::before,
      &::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e2e8f0;
        margin: 0 16px;
      }
    }

    .social-icons {
      display: flex;
      justify-content: center;
      gap: 20px;

      .social-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: #f1f5f9;
        color: #64748b;

        &:hover {
          transform: translateY(-4px);
          background: white;
          color: #0ea5e9;
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  /* 页脚样式 */
  .footer {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    margin-top: 25px;
    width: 100%;

    a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s;

      &:hover {
        color: #0ea5e9;
      }
    }
  }
}

/* 主题切换按钮样式 */
.theme-switch {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 20;

  .theme-button {
    width: 42px;
    height: 42px;
    background: #f1f5f9;
    border: none;
    color: #64748b;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;

    &:hover {
      background: white;
      color: #0ea5e9;
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }
  }
}

/* 登录选项样式 */
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;
  width: 100%;

  .el-checkbox {
    color: #64748b;
  }

  .forget-password {
    color: #64748b;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s;

    &:hover {
      color: #0ea5e9;
    }
  }
}

/* 动画相关 */
@keyframes scan {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    top: calc(100% - 2px);
    opacity: 0.5;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(5%, -5%);
  }
  50% {
    transform: translate(0, -10%);
  }
  75% {
    transform: translate(-5%, -5%);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* 深色模式适配 */
.dark {
  .login-card {
    background: #1e293b;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    
    .brand-title {
      background: linear-gradient(45deg, #38bdf8, #2dd4bf);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .welcome-text {
      background: linear-gradient(45deg, #38bdf8, #2dd4bf);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .login-tip {
      color: #94a3b8;
    }

    .login-tabs {
      background: #0f172a;

      .tab-item {
        color: #94a3b8;

        &.active {
          background: #1e293b;
          color: #38bdf8;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        &:hover:not(.active) {
          background: #1e293b80;
        }
      }
    }

    :deep(.el-input__wrapper) {
      background: #0f172a;

      &:hover {
        background: #1e293b;
      }

      &.is-focus {
        border-color: #38bdf8;
        background: #1e293b;
      }
    }

    .login-button {
      background: linear-gradient(45deg, #38bdf8, #2dd4bf);
    }

    .qrcode-wrapper {
      background: #1e293b;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

      .qrcode-scanner {
        background: #38bdf8;
      }

      .qrcode-mask {
        background: rgba(15, 23, 42, 0.95);
      }
    }

    .qrcode-tip {
      color: #94a3b8;
    }

    .social-login {
      .divider {
        color: #64748b;

        &::before,
        &::after {
          background: #334155;
        }
      }

      .social-icon {
        background: #0f172a;
        color: #94a3b8;

        &:hover {
          background: #1e293b;
          color: #38bdf8;
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }
      }
    }

    .footer {
      color: #64748b;

      a:hover {
        color: #38bdf8;
      }
    }
  }

  .theme-switch {
    .theme-button {
      background: #0f172a;
      color: #94a3b8;

      &:hover {
        background: #1e293b;
        color: #38bdf8;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
      }
    }
  }

  .login-options {
    .el-checkbox {
      color: #94a3b8;
    }

    .forget-password {
      color: #94a3b8;

      &:hover {
        color: #38bdf8;
      }
    }
  }
  
  .animated-shapes {
    .shape {
      opacity: 0.15;
    }
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .login-card {
    padding: 30px 20px;
    margin: 0 15px;
    max-width: 360px;
  }
  
  .welcome-text {
    font-size: 20px;
  }
  
  .brand-content .brand-title {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 25px 15px;
    max-width: 320px;
  }
  
  .social-icons {
    gap: 15px !important;
  }
  
  .social-icon {
    width: 38px !important;
    height: 38px !important;
  }
}
</style>

